<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的模板</title>
		<style>
			.clas{
					cursor: no-drop;
				}
			
		</style>
	</head>

	<body>


		<div id="app">
			<!-- 单选 -->
			<!-- <label for="">
				<input type="checkbox" id="agree" v-model="agree"> 同意协议
			</label>
			{{agree}}
			<button :disabled="!agree" :class="{clas:!agree}">下一步</butt> -->
			<!-- 多选 -->
			<input type="checkbox" value="篮球" v-model="arra"/>篮球
			<input type="checkbox" value="足球" v-model="arra"/>足球
			<input type="checkbox" value="乒乓球" v-model="arra"/>乒乓球
			{{arra}}
		</div>
	</body>



	<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
	<script>
		const app = new Vue({
			el: '#app',
			data: {
				agree: true,
				arra:[],
			},

		})
	</script>
